<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import { Echartsd } from '../../api/MyEcharts/index'

var option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '2%',
        right: '4%',
        bottom: '14%',
        top: '16%',
        containLabel: true
    },
    legend: {
        data: ['教学用水', '安防设备用电', '生态用水', '生活用水'],
        right: 10,
        top: 12,
        textStyle: {
            color: "#fff"
        },
        itemWidth: 12,
        itemHeight: 10,
        // itemGap: 35
    },
    xAxis: {

    },

    yAxis: {

    },
    series: []
};

onMounted(async () => {
    var myChart = echarts.init(document.getElementById('main1'));

    // 指定图表的配置项和数据
    // var option = {
    //     tooltip: {
    //         trigger: 'axis',
    //         axisPointer: { // 坐标轴指示器，坐标轴触发有效
    //             type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    //         }
    //     },
    //     grid: {
    //         left: '2%',
    //         right: '4%',
    //         bottom: '14%',
    //         top: '16%',
    //         containLabel: true
    //     },
    //     legend: {
    //         data: ['教学用水', '安防设备用电', '生态用水', '生活用水'],
    //         right: 10,
    //         top: 12,
    //         textStyle: {
    //             color: "#fff"
    //         },
    //         itemWidth: 12,
    //         itemHeight: 10,
    //         // itemGap: 35
    //     },
    //     xAxis: {
    //         type: 'category',
    //         data: ['七月', '八月'],
    //         axisLine: {
    //             lineStyle: {
    //                 color: 'white'
    //             }
    //         },
    //     },

    //     yAxis: {
    //         type: 'value',
    //         max: '1200',
    //         axisLine: {
    //             show: false,
    //             lineStyle: {
    //                 color: 'white'
    //             }
    //         },
    //         splitLine: {
    //             show: true,
    //             lineStyle: {
    //                 color: 'rgba(255,255,255,0.3)'
    //             }
    //         },
    //         axisLabel: {}
    //     },
    //     series: [{
    //         name: '教学用水',
    //         type: 'bar',
    //         barWidth: '15%',
    //         itemStyle: {
    //             normal: {
    //                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    //                     offset: 0,
    //                     color: '#fccb05'
    //                 }, {
    //                     offset: 1,
    //                     color: '#f5804d'
    //                 }]),
    //             },
    //         },
    //         data: [400, 600]
    //     },
    //     {
    //         name: '安防设备用电',
    //         type: 'bar',
    //         barWidth: '15%',
    //         itemStyle: {
    //             normal: {
    //                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    //                     offset: 0,
    //                     color: '#8bd46e'
    //                 }, {
    //                     offset: 1,
    //                     color: '#09bcb7'
    //                 }]),
    //             }

    //         },
    //         data: [400, 500]
    //     },
    //     {
    //         name: '生态用水',
    //         type: 'bar',
    //         barWidth: '15%',
    //         itemStyle: {
    //             normal: {
    //                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    //                     offset: 0,
    //                     color: '#248ff7'
    //                 }, {
    //                     offset: 1,
    //                     color: '#6851f1'
    //                 }])
    //             }
    //         },
    //         data: [400, 700]
    //     }, {
    //         name: '生活用水',
    //         type: 'bar',
    //         barWidth: '15%',
    //         itemStyle: {
    //             normal: {
    //                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    //                     offset: 0,
    //                     color: 'red'
    //                 }, {
    //                     offset: 1,
    //                     color: 'red'
    //                 }])
    //             }
    //         },
    //         data: [400, 700]
    //     }]
    // };

    let res = await Echartsd()


    option.series = res.data.data.result[0].series
    option.xAxis = res.data.data.result[0].yAxis
    option.yAxis = res.data.data.result[0].xAxis


    myChart.setOption(option);



})
</script>

<template>
    <div class="right-Top">
        <div class="right-Top-img">
            <span style="padding-left: 20px; color: aliceblue; font-size: 1.5rem; line-height: 3rem;">水电用量</span>
        </div>
        <div class="right-Top-bottom">
            <div class="right-Top-bottom-header">
                <div>
                    <div class="right-Bottom-bottom-header-left">

                    </div>
                    <div class="right-Bottom-bottom-header-right">
                        <div>总用电量：72670</div>
                    </div>
                </div>
                <div>
                    <div class="right-Bottom-bottom-header-left-right">

                    </div>
                    <div class="right-Bottom-bottom-header-right">
                        <div>总用水量：69035</div>
                    </div>
                </div>
            </div>
            <div class="right-Top-bottom-foot">
                <div id="main1" style="width: 100%;height:100%;"></div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.right-Top {
    width: 28rem;
    height: 25rem;
    margin: 6rem 2rem 4rem 6rem;
    background-color: rgb(16, 29, 91);

    &-img {
        width: 100%;
        height: 3rem;
        background: url('../../assets/images/RightRight.png') no-repeat center center;
        background-size: 100% 100%;
    }

    &-bottom {
        width: 100%;
        height: 20rem;
        margin-top: 2rem;
        background-color: rgb(29, 46, 107);

        &-header {
            width: 100%;
            height: 5rem;
            display: flex;

            >div {
                flex: 1;
            }
        }

        &-foot {
            width: 100%;
            height: 15rem;
        }
    }
}

.right-Bottom-bottom-header-left {
    width: 30%;
    height: 100%;
    float: left;
    background: url('../../assets/icon/智能检测/dian.png') no-repeat center center;
}

.right-Bottom-bottom-header-right {
    width: 70%;
    height: 100%;
    float: left;
    text-align: center;
    line-height: 5rem;
    color: white;
    font-size: 18px;
}

.right-Bottom-bottom-header-left-right {
    width: 30%;
    height: 100%;
    background: skyblue;
    float: left;
    background: url('../../assets/icon/智能检测/shui.png') no-repeat center center;
}
</style>